import React from 'react';
import {inject,observer} from "mobx-react";
import './Login.css';
import '../../icon/yl/iconfont.css';
import axios from 'axios'
import {REGISTER_MERCHANT} from '../../utils/api'

@inject('myStore')
@observer
class Login extends React.Component {
    constructor() {
        super();
        this.state={
            show:false,
            merchanr_name:'',
            merchant_card:'',
            merchant_join_date:'',
            merchant_site:'',
            user_email:'',
            user_iphone:'',
            user_name:'',
            user_pwd:'',
            user_yespwd:''
        }
    }
    // 登录按钮
    loginUser=()=>{
        console.log('登录')
        alert('登陆成功')
        // 调用登录的方法
        this.props.myStore.loginBtn().then(data=>{
            // 跳转页面
            this.props.history.push('/myNav')
        })
    }
    // 点击登录之后出现登录页面
    loginSmall(show){
        console.log('点击登录之后出现登录页面')
        let isShow=!show
        this.setState({
            show:isShow
        })
    }
    //注册
    registerUser=()=>{
        if (this.state.user_yespwd===this.state.user_pwd){
            alert('两次密码不符合！请重新输入')
        }
        else{
            axios({
                url:REGISTER_MERCHANT,
                method:'post',
                data:{
                    merchanr_name:this.state.merchanr_name,
                    merchant_card:this.state.merchant_card,
                    merchant_join_date:this.state.merchant_join_date,
                    merchant_site:this.state.merchant_site,
                    user_email:this.state.user_email,
                    user_iphone:this.state.user_iphone,
                    user_name:this.state.user_name,
                    user_pwd:this.state.user_pwd
                }
            }).then(data=>{
                if (data.data.code===200){
                    alert('你已经注册成功！请关注邮箱')
                }else{
                    alert("注册失败！输入内容有误！")
                }
            })
        }

    }
    // 获取注册输入框的值
    registerContent=(name)=>(e)=> {
        console.log(e.target.value)
        this.shuru(name,e.target.value)
    }
    // 双向绑定
    shuru=(name,val)=>{
        this.setState({
            [name]:val
        })
    }
    // 点击注册之后出现注册页面
    registerSmall(show){
        console.log('点击注册之后出现注册页面')
        let isShow=!show
        this.setState({
            show:isShow
        })
    }
    render() {
        return (
            <div className='body'>
                <div className={this.state.show?"right-panel-active":null} id="container">
                    {/*注册*/}
                    <div  className="form-container sign-up-container">
                        <form action="#" href='#'>
                            <h1>商家注册</h1>
                            <div className="social-container"><a href='#' className="social">
                                <ion-icon class="iconfont icon-QQ" />
                            </a> <a href='#' className="social">
                                <ion-icon class="iconfont icon-weixin" />
                            </a> <a href='#' className="social">
                                <ion-icon class="iconfont icon-weibo" />
                            </a>
                                <a href='#' className="social">
                                    <ion-icon class="iconfont icon-zhifubao" />
                                </a>
                            </div>
                            <span id='span'>或使用您的电子邮箱注册</span>
                            <div id='registerInput'>
                                <input value={this.state.user_name} onChange={this.registerContent('user_name')} type="text" className="registerInput" placeholder="姓名" />
                                <input value={this.state.user_iphone} onChange={this.registerContent('user_iphone')} type="text" className="registerInput" placeholder="手机" />
                                <input value={this.state.user_email} onChange={this.registerContent('user_email')} type="email" className="registerInput" placeholder="邮箱" />
                                <input value={this.state.user_pwd}  onChange={this.registerContent('user_pwd')} type="password" className="registerInput" placeholder="密码" />
                                <input value={this.state.user_pwd}  onChange={this.registerContent('user_yespwd')} type="password" className="registerInput" placeholder="确认密码" />
                                <input value={this.state.merchanr_name} onChange={this.registerContent('merchanr_name')} type="text" className="registerInput" placeholder="店铺名称" />
                                <input value={this.state.merchant_card} onChange={this.registerContent('merchant_card')} type="text" className="registerInput" placeholder="身份证" />
                                <input value={this.state.merchant_join_date} onChange={this.registerContent('merchant_join_date')} type="text" className="registerInput" placeholder="注册时间" />
                                <input value={this.state.merchant_site} onChange={this.registerContent('merchant_site')} type="text" className="registerInput" placeholder="商家所在地" />
                            </div>

                            <button onClick={this.registerUser}>注册</button>
                        </form>
                    </div>
                    {/*登录*/}
                    <div  className="form-container sign-in-container">
                        <form action="#" href='#'>
                            <h1>登录</h1>
                            <div className="social-container"><a href="#" className="social">
                                <ion-icon class="iconfont icon-QQ" />
                            </a> <a href="#" className="social">
                                <ion-icon class="iconfont icon-weixin" />
                            </a> <a href="#" className="social">
                                <ion-icon class="iconfont icon-weibo" />
                            </a>
                                <a href="#" className="social">
                                    <ion-icon class="iconfont icon-zhifubao" />
                                </a>
                            </div>
                            <span id='span'>或用电话登录</span>
                            <input type="email" className="registerInput" placeholder="电话" />
                            <input type="password" className="registerInput" placeholder="密码" />
                            <button onClick={this.loginUser}>登录</button>
                        </form>
                    </div>
                    {/*右边*/}
                    <div className="overlay-container">
                        <div className="overlay">
                            <div className="overlay-panel overlay-left">
                                <h1>欢迎回来</h1>
                                <p>与我们保持联系请登录您的个人信息</p>
                                <button className="ghost" id="signIn" onClick={this.loginSmall.bind(this,this.state.show)}>登录</button>
                            </div>
                            <div className="overlay-panel overlay-right">
                                <h1>欢迎光临</h1>
                                <p>输入您的个人资料，并与我们一起开始旅程</p>
                                <button className="ghost" id="signUp" onClick={this.registerSmall.bind(this,this.state.show)}>注册</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}
export default Login;